<template>
  <div class="home_container">
    <div class="home_header">
      <el-container>
        <el-header style="text-align: right; font-size: 100%;height: 60px;background-color:#66B3FF">
        </el-header>
      </el-container>
    </div>

    <div class="home_main">
      <el-container>
        <el-aside style="text-align: left;height: 92vh;width: 200px;background-color: #F2F6FC">
          <el-button icon="el-icon-plus" style="margin-left: 10%;margin-top: 15%;width: 150px" @click="addQuestionClick">
            新建问卷
          </el-button>
          <el-menu router style="margin-top: 50px">
            <el-menu-item :index="{path:'/questionnaireList'}" ><i class="el-icon-s-order">全部问卷</i></el-menu-item>
            <el-menu-item :index="{path:'/recycleBin'}"><i class="el-icon-delete-solid">回收站</i></el-menu-item>
            <el-menu-item :index="{path:'/groupList'}"><i class="el-icon-user-solid">群组列表</i></el-menu-item>
            <el-menu-item :index="{path:'/dataScreen'}"><i class="el-icon-s-platform">数据大屏</i></el-menu-item>
          </el-menu>
        </el-aside>

        <el-main style="text-align: left;height: 92vh;">
          <el-row type="flex">
            <el-col :span="6" style="font-size: 200%;">
              问卷列表
            </el-col>
            <el-col :span="6" :push="11" style="margin-top: 5px">
              <el-input placeholder="请输入问卷名进行搜索" v-model="searchByName" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click = "searchByNameClick"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-row v-for="(questionnaire) in allQuestionnaire.slice((currentPage-1)*pageSize,currentPage*pageSize)" tracked-by="$index">
            <el-form :model="questionnaire" status-icon ref="questionnaire">
              <el-card style="width: 1240px;margin-top: 20px">
                <div>
                  <span style="font-size: 150%">{{questionnaire.title}}</span>
                  <span style="float: right; padding: 3px 0">答题人数：{{questionnaire.answerNumber}}</span>
                </div>
                <div style="margin-top: 40px">
                  <span style="font-size: 100%">{{questionnaire.state}}</span>
                  <el-button-group style="float: right; padding: 3px 0" type="text">
                    <el-button icon="el-icon-search" @click = "viewQuestionClick(questionnaire.id)">
                      查看答卷
                    </el-button>
                    <el-button icon="el-icon-s-data" @click = "statisticQuestionClick(questionnaire.id)">
                      答题统计
                    </el-button>
                    <el-button icon="el-icon-edit" @click = "modifyQuestionClick(questionnaire.id)" :disabled = "questionnaire.state !== '未发布'">
                      编辑问卷
                    </el-button>
                    <el-button icon="el-icon-video-play" @click = "releaseQuestionClick(questionnaire.id)" :disabled = "questionnaire.state !== '未发布'">
                      发布问卷
                    </el-button>
                    <el-button icon="el-icon-delete" @click = "delQuestionClick(questionnaire.id)" :disabled = "questionnaire.state == '发布中'">
                      删除
                    </el-button>
                  </el-button-group>
                </div>
              </el-card>
            </el-form>
          </el-row>
          <div class="block" style="margin-left: 380px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-size="4"
                :page-sizes="[4]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="allQuestionnaire.length">
            </el-pagination>
          </div>
        </el-main>
      </el-container>

    </div>


  </div>
</template>

<script>
export default {
  data(){
    return{
      allQuestionnaire:[],
      questionnaire_list: [],
      questionnaire:{
        id:'',
        userId:'',
        question:'',
        content:'',
        title:'',
        questionNumber:'',
        state:'',
        answerNumber:'',
      },
      total:'',
      currentPage: 1,
      pageSize: 4,
      searchByName:'',
      temp:''
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //新建问卷
    //点击这个按钮之后跳转到新建页面
    //应当把用户的id传输到新建组件中，然后新建完毕之后返回后端
    addQuestionClick(){
      console.log(this.$route.query.userId)
      this.$router.push({
        path:'/chooseTemplate',
      })
    },
    //删除问卷，删除问卷会将问卷放入回收站中，当前列表刷新，将state值设置为回收
    //并且需要把删除的数据返回后端
    //删除问卷应当判断条件，
    delQuestionClick(id){
      //删除显示页面的数据
      for(let i = 0; i < this.allQuestionnaire.length; i++){
        if(this.allQuestionnaire[i].id == id){
          this.allQuestionnaire.splice(i,1)
          break
        }
      }
      //修改state值
      for(let i = 0; i < this.questionnaire_list.length; i++){
        if(this.questionnaire_list[i].id == id){
          this.questionnaire_list[i].state = '回收'
          break
        }
      }
      //向后端发送数据
      this.$http({
        url:'http://47.104.100.60:83/recycleQuestionnaire',
        method:'post',
        data:{
          id:id
        }
      }).then(res =>{
        //如果有返回值，修改成功
        if(res.data){
          alert('删除成功')
        }
      }).catch(err =>{
        console.log(err)
      })
    },
    //点击修改问卷路由到编辑组件
    //只有某些特定状态下的问卷可以被修改
    //将整个问卷的数据传输到修改组件，然后再修改完成之后由修改组件传递到后端接口，路由回当前组件
    modifyQuestionClick(id){

      //传递问卷数据
      this.questionnaire = this.questionnaire_list.filter(item =>{
        if(item.id == id){
          return item
        }
      })
      // console.log(this.questionnaire)
      this.$router.push({
        path:"/createQuestionnaire",
        query:{
          id:id,

        }
      })
    },
    //查看答卷
    viewQuestionClick(id){

      this.$router.push({
        path:"/answer",
        query:{
          questionnaireId:id,

        }
      })
    },
    //查看答题统计
    statisticQuestionClick(id){

      this.$router.push({
        path:"/answerStatistic",
        query:{
          questionnaireId:id,
        }
      })
    },

    //跳转到发布页面
    releaseQuestionClick(id){

      this.$router.push({
        path:"/publish",
        query:{
          id:id,
        }
      })
    },
    //前端实现问卷查找
    //此处是重点，该方法在其余组件中也会使用到
    searchByNameClick(){
      let reg = new RegExp(this.searchByName)
      let flag = 0
      for(let i = 0; i < this.total; i++){
        if(reg.test(this.questionnaire_list[i].title)){
        //  满足条件就把该问卷调到最前面
        //  逻辑比较简陋
        //  从该位置开始删除掉一个元素，获取删除元素的数组，提取其中的元素放到该原数组的首部
        //  如果这样有没有可能整体显示效果是动态的。。。如果是就进行修改找一个中间暂存
          this.questionnaire_list.unshift(this.questionnaire_list.splice(i,1)[0])
          this.allQuestionnaire.unshift(this.allQuestionnaire.splice(i,1)[0])
          flag = 1
        }
      }
      if(!flag){
        alert("无匹配问卷")
      }

    },

  },

  //获取问卷数据
  mounted() {
    this.$http({
      url:'http://47.104.100.60:83/findByUserId',
      method:'post',
      data:{
        //后端数据都在id为1上
        userId:sessionStorage.getItem('userId')
        // userId:1
      }
    }).then(res =>{

    //  将后端获取到的数据存储起来,state为回收的放在回收站中
      this.questionnaire_list = res.data.filter((item)=>{
        if(item.state == '未发布' || item.state == '发布中' || item.state == '已结束'){
          return item
        }
      })
      //去除state为模板和回收数据

      this.total = this.questionnaire_list.length
    //  为questionnaireall赋值
      for(let i = 0; i<this.total; i++){
        this.allQuestionnaire.push({
          title:this.questionnaire_list[i].title,
          answerNumber:this.questionnaire_list[i].answerNumber,
          state:this.questionnaire_list[i].state,
          //为了删除修改某个特定问卷，必须添加问卷id，这样可以根据问卷id找到对应的问卷
          id:this.questionnaire_list[i].id
        })
      }
    }).catch(err =>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>